<template>
    <view class="feedback-box">
        <view class="feedback-content">
            <u-form :model="form" ref="uForm">
                <view class="feedback-radio" >
                    <u-form-item  label-width="auto" :border-bottom="borders" prop="complaintType">
                        <u-radio-group v-model="form.complaintType">
                            <u-radio name="1">反馈问题</u-radio>
                            <u-radio name="2">功能意见</u-radio>
                        </u-radio-group>
                    </u-form-item>
                </view>
                <view class="feedback-textarea">
                    <u-form-item  label-width="auto" :border-bottom="borders" prop="content">
                        <u-input :height="height"  border auto-height :type="type" v-model="form.content" placeholder="请输入"> </u-input>
                        </u-form-item>
                </view>
                <view class="feedback-input">
                    <u-form-item  label-width="auto" :border-bottom="borders" prop="memberTel">
                    <u-input border v-model="form.memberTel" placeholder="请输入手机号码" />
                    </u-form-item>
                </view>
            </u-form>
        </view>
        <view class="feedback-button">
            <u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
        </view>
    </view>
</template>

<script>
import { mapActions } from 'vuex';
import uInput from '../../uview-ui/components/u-input/u-input.vue';
export default {
  components: { uInput },
	data() {
		return {
            type:'textarea',
            height:336,
            borders:false,
			form: {
                complaintType:'',
                content:'',
                memberTel:''
			},
            rules:{
                complaintType:[
                        {required: true,message: '请选择类型',trigger: ['change','blur']},
                    ],
                 content:[
                        {required: true,message: '请输入反馈内容',trigger: ['change','blur']},
                    ],
                memberTel:[
                    {required: true,message: '请输入手机号码',trigger: ['change','blur']},
                    {validator: (rule, value, callback) => {
                    return this.$u.test.mobile(value);
                    },
                    message: '联系人电话不正确',
                    trigger: ['change','blur'],
                    }
                ]
            }
		}
	},
    onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
    methods:{
		...mapActions(['ActPostaddComplaint']),
         onSubmit(){
            this.$refs.uForm.validate(async(valid) => {
				if (valid) {
                     const res1 = await this.ActPostaddComplaint(this.form)
                     if(res1.success){
                       await uni.showModal({
                            title: '提示',
                            content: res1.msg,
                            showCancel:false
                        });
                        await uni.navigateBack()
                        }else{
                            uni.showModal({
                                title: '提示',
                                content: res1.msg,
                                showCancel:false
                            });
                        }
				    } 
			});
        }
    }
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: #f6f6f6;
}
.feedback-box{
    margin: 24rpx 20rpx 0 28rpx;
}
.feedback-content{
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 24rpx ;

    .feedback-radio{
        padding-top: 10rpx;
        radio-group{
            label:last-child{
                padding-left: 24rpx;
            }
        }
    }
    .feedback-textarea{
        padding-top: -8rpx;
    }
    .feedback-input{
        padding-bottom: 12rpx;
    }
}
.feedback-button{
    padding-top: 48rpx;
    button{
        border-radius: 102rpx;
        background-color: #999999;
        color: #fff;
        font-size: 34rpx;
    }
}
</style>
